<template>
  <section class="page podcast" style="overflow-y: hidden;" >
    <headerbar class="podcast_header">
      {{ title }}
    </headerbar>
    <section class="search">
      <div class="icon-search">
        <img
          src="../../../../../static/images/dangjian/home/icon-search-fff.png"
          alt=""
        />
      </div>
      <form action="javascript:return true">
          <input id='podcastSearchInput' @keypress="searchBtn" type="search" value="" v-model="keyword"  placeholder="请输入搜索内容" />
      </form>
      <div v-if="keyword" @click="removeKeyword()" class="icon-colse">
        <img
          src="../../../../../static/images/dangjian/home/icon-close-e6e6e6.png"
          alt=""
        />
      </div>
    </section>
    <section v-if="!isShowList" class="area_list">
      <h1 class="title">搜索记录</h1>
      <div class="clearfix">
        <div
          class="item"
          v-for="(data, index) in recordList"
          :key="index"
          @click="setKeyword(data)"
        >
          <div class="icon-time">
            <img
              src="../../../../../static/images/dangjian/home/icon-time-fff.png"
              alt=""
            />
          </div>
          <span>{{data}}</span>
          <div @click.stop="removeSearchRecord(index)" class="icon-colse">
            <img
              src="../../../../../static/images/dangjian/home/icon-close-e6e6e6.png"
              alt=""
            />
          </div>
        </div>
        <noData v-if="recordList.length === 0"></noData>
      </div>
      <p v-if="recordList.length > 0" @click="removeSearchRecord('all')" class="close_all">清除全部搜索记录</p>
    </section>
    <videoList
      v-if="isShowList"
      keyNew="-2"
      useType="sousuo"
      :keyword="keyword"
      menuId=""
    ></videoList>
  </section>
</template>

<script>
import videoList from "./videoList.vue";
import StorageKeys from '@/common/const/StorageKeys'
export default {
  name: "podcastSearch",
  components: { videoList },
  data() {
    return {
      title: "搜索",
      keyword: "", //输入框关键字
      isShowList: false, //是否显示列表
      recordList: []
    };
  },
  watch: {
    $route(to, from) {},
    keyword(newVal, oldVal) {
      if (newVal=="") {
          this.isShowList = false;
      }
    },
  },
  created() {
    this.recordList = this.$localStorage.get(StorageKeys.PODCAST_SEARCH_RECORD) || [];
  },
  beforeDestroy() {
  },
  methods: {
    // 清空输入框
    removeKeyword() {
      this.keyword = "";
    },
    // 点击搜索记录
    setKeyword(data) {
      this.keyword = data;
      this.isShowList = true;
      this.addSearchRecord();
    },
    // 回车执行搜索
    searchBtn(event) {
		  if (event.keyCode == 13) {
        if (this.keyword=="") {
          return this.tools.tip('请输入搜索内容');
        }
        event.preventDefault(); //禁止默认事件（默认是换行）
        this.$nextTick(()=>{
          this.isShowList = true;
          this.addSearchRecord();
        })
      }
    },
    // 添加最近搜索记录
    addSearchRecord() {
      this.recordList.unshift(this.keyword);
      this.recordList = this.excludeSameRecord(this.recordList).slice(0, 10); //去重并只保留最近10次搜索记录

      this.$localStorage.set(StorageKeys.PODCAST_SEARCH_RECORD, this.recordList)
    },
    // 删除最近搜索记录
    removeSearchRecord(index) {
      if (index=='all') {
        this.$createDialog({
          type: 'confirm',
          // icon: 'cubeic-alert',
          title: '温馨提示',
          content: '是否清空历史记录？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            this.recordList = [];
          },
          onCancel: () => {
          }
        }).show()
      } else {
        this.recordList.splice(index, 1);
      }
      this.$localStorage.set(StorageKeys.PODCAST_SEARCH_RECORD, this.recordList)
    },
    // 过滤掉历史相同记录
    excludeSameRecord(list) {
      return Array.from(new Set(list))
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/stylus/moon.scss";
// 搜索
.search {
  margin:0 pxToRem(30px);
  // background: #fff;
    background: rgba($color: #fff, $alpha: 0.15);
  border-radius: pxToRem(10px);
  position: relative;
  height: pxToRem(70px);
  font-size: 14PX;
  input {
    border-radius: pxToRem(10px);
    width: 100%;
    height: pxToRem(70px);
    background: none;
    margin: 0;
    padding: 0 pxToRem(54px);
    border: none;
    font-size: 14PX;
    font-weight: 400;
    text-align: left;
    color: #fff;
    font-family: dang;
    &::placeholder {
      font-family: inherit;
      font-size: 14PX;
    }
  }
  .icon-search {
    position: absolute;
    left: pxToRem(16px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: pxToRem(26px);
    height: pxToRem(27px);
    img {
      @include fullImg();
    }
  }
  .icon-colse {
    position: absolute;
    top: 48%;
    right: pxToRem(16px);
    transform: translateY(-50%);
    z-index: 3;
    width: pxToRem(26px);
    height: pxToRem(27px);
    img {
      @include fullImg();
    }
  }
}

.area_list{
  height: 85vh;
  padding:pxToRem(20px) pxToRem(30px);
  .title{
    font-size: 14PX;
    color: #fff;
    margin: pxToRem(10px) 0;
  }
  .close_all{
    font-size: 14PX;
    color: #ccc;
    margin: pxToRem(40px) 0 0;
    text-align: center;
  }
  .item {
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    font-size: 14PX;
    color: #fff;
    background: rgba($color: #fff, $alpha: 0.15);
    margin-bottom: pxToRem(10px);
    padding: 0 pxToRem(54px);
    position: relative;
    height: pxToRem(64px);
    line-height: pxToRem(70px);
    border-radius: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .icon-time,.icon-colse {
      position: absolute;
      top: 48%;
      transform: translateY(-50%);
      z-index: 3;
      width: pxToRem(26px);
      height: pxToRem(27px);
      img {
        @include fullImg();
      }
    }
    .icon-time {
      left: pxToRem(16px);
    }
    .icon-colse {
      right: pxToRem(16px);
    }
  }
}
</style>
